/*大框架*/
* {
    margin: 0;
    padding: 0;

}

html, body{
    height: 100%;
    width: 100%;
    overflow-x: scroll;
}
.wyy-nav {
    height: 93px;
    width: 100%;
    background-color: rgb(36,36,36);
    display: flex;
    justify-content: center;
}
.wyy-body {
    width: 100%;
    height: calc(100% - 93px);
    overflow-y: scroll;
}
.wyy-body-menu{
    height: 50px;
    width: 100%;
    background-color: rgb(194,12,12);
}
.wyy-body-flag{
    height: 360px;
    width: 100%;
    /* 轮播图*/
        overflow:hidden; 
    position: relative;
    /* 轮播图*/
    background-color: rgb(185, 123, 130);
}

/*轮播图*/
.wyy-body-flag-mohu{
        height: 360px;
    width: 100%;
    background: url("../img/pic1.png");
    background-size: cover;
    position: absolute;
    left:0px;
    top:0px;
    filter: blur(20px);
}
/*轮播图*/
.wyy-body-ctn{
    height: 1986px;
    width: 100%;
    background-color: rgb(245,245,245);
    display: flex;
    justify-content: center;
}
.wyy-body-bottom{
    height: 220px;
    width: 100%;
    background-color: rgb(242,242,242);
}
/*nav里面样式*/
.wyy-nav-logo {
    height: 100%;
    width: 246px;
}
.wyy-nav-logo > * {
    height: 100%;
    width: 100%;
}

.wyy-nav-menu {
    width: 50%;
    height: 100%;
    display: flex;
}
.wyy-nav-menu > div{
    height: 100%;
}
.wyy-nav-menu > div > button{
    height: 100%;
    width: 100%;
    background: none;
    color: rgb(250,250,250);
    font-size: 20px;
    border: none;
}
.wyy-nav-menu > div > button:hover{
    background-color: rgb(0,0,0);
    cursor: pointer;
}
.wyy-nav-menu > div > button:active{
    transform: scale(0.9);
}

.wyy-nav-hot {
    height: 100%;
    width: 60px;
}
.wyy-nav-rightParts {
    height: 100%;
    width: 350px;
}
/*body里面框架样式*/

/*body-flag里面框架样式*/
.wyy-body-ctn-main{
    height: 100%;
    width: 1225px;/*715px;*/
    display: flex;

}
.wyy-body-ctn-left{
    height: 100%;
    width: 715px;
    display: block;/*垂直布局*/
    /* background-color: red; */
    border: 1px solid rgb(230,230,230);
}
.wyy-body-ctn-left-up{
    height: 27.4%;
    width: 100%;
    /* border: 1px solid black; */
}
.wyy-body-ctn-left-mid{
    height: 17.8%;
    width: 100%;
    /* border: 1px solid blue; */
}
.wyy-body-ctn-left-down{
    height: 36%;
    width: 100%;
    /* border: 1px solid pink; */
}
.wyy-body-ctn-right{
    height: 100%;
    width: calc(100% - 715px);
    display: block;
    border: 1px solid rgb(230,230,230);
}
.wyy-body-ctn-right-d1{
    height: 9.7%;
    width: 100%;
    background-image: linear-gradient(#FFFFFF,#B5B5B5);
    display: block;
}
.wyy-body-ctn-right-d2{
    height: 35.2%;
    width: 100%;
}
.wyy-body-ctn-right-d3{
    height: 54.37%;
    width: 100%;
}
/*body-ctn里面框架样式*/
.wyy-body-ctn-main{
    height: 100%;
    width: 1225px;/*715px;*/
    background-color: rgb(255,255,255);
    display: flex;
    border: 1px solid rgb(230,230,230);
}
.wyy-body-ctn-left{
    height: 100%;
    width: 715px;
    border: 1px solid rgb(230,230,230);

}
.wyy-body-ctn-right{
    height: 100%;
    width: calc(100% - 715px);
    border: 1px solid rgb(230,230,230);
}
/*海报轮播*/
    .wyy-body-flag-img{
    width: 50%;
    height: 100%;
    position: relative;
    left:25%;
    }
    .wyy-body-flag-img > img{
    width: 100%;
    height: 95%;
    position: absolute;
    left: 0px;
    top: 10px;
    border-radius: 10px;
    }
    .wyy-body-flag-img > img:hover{
        animation: fangda 2s cubic-bezier(0,1,0,0) alternate;
        animation-fill-mode: forwards; 
        cursor: pointer;
    }
    @keyframes fangda{
    0%{
        transform: scale(1.01);
    }
    100%{
        transform: scale(1.03);
    }
    }
    .wyy-body-flag > .btn-sliders{
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    display: flex;
    }
    .wyy-body-flag > .btn-sliders > span{
    height: 10px;
    width: 10px;
    margin-left:10px;
    margin-right: 20px; 
    border: 2px solid white;
    cursor: pointer;
    border-radius: 90px;
    }
    .wyy-body-flag > .btn-sliders > span:hover{
    background-color: rgb(170,170,170);
    transform: scale(1.2);
    }
    .wyy-body-flag > .left{
        outline: none;
        font-size: 50px;
        background: none;
        border-radius: 90px;
        color: white;
        border-color: transparent;
        position: absolute;
        left: 15%;
        top: 40%;
    }
    .wyy-body-flag > .left:hover{
    background-color: transparent;
    transform: scale(1.2);
    cursor: pointer;
    }
    .wyy-body-flag > .right{
        outline: none;
        font-size: 50px;
        background: none;
        border-radius: 90px;
        color: white;
        border-color: transparent;
        position: absolute;
        right: 15%;
        top: 40%;
    }
    .wyy-body-flag > .right:hover{
    background-color: transparent;
    transform: scale(1.2);
    cursor: pointer;
    }

    /*海报轮播*/



/*底部音乐播放器*/
.wyy-body-player {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: #f1f3f4;
    /*border: 1px red solid;*/
}
.wyy-body-player audio{
    position: relative;
    width: 50%;
    float: left
}

/*隐藏audio标签的下载 这个方式兼容所有版本的谷歌浏览器*/
audio::-webkit-media-controls {
       overflow: hidden !important
}
audio::-webkit-media-controls-enclosure {
    width: calc(100% + 32px);
    margin-left: auto;
}

/*播放器歌曲图片*/
.wyy-body-player-img{
    height: 100%;
    position: relative;
    margin-left: 280px;
    float: left;
}

/*播放器点赞图标*/
.wyy-body-player-likeimg{
    background-image: url("../svg/like.svg");
    background-size: 100% 100%;
    float: left;
    width: 35px;
    height: 35px;
    margin-left: 20px;
    margin-top: 4px;
}

.wyy-body-player-lastimg{
    background-image: url("../svg/last.svg");
    background-size: 100% 100%;
    float: left;
    width: 17px;
    margin-top: 18px;
    height: 17px;
    margin-left: 10px;
}

.wyy-body-player-lastimg:hover{
    background-image: url("../svg/last(1).svg");
}

.wyy-body-player-nextimg{
    background-image: url("../svg/next.svg");
    background-size: 100% 100%;
    float: left;
    width: 17px;
    margin-top: 18px;
    height: 17px;
    margin-left: 10px;
}

.wyy-body-player-nextimg:hover{
    background-image: url("../svg/next(1).svg");
}
.wyy-body-player-likeimg:hover{
    background-image: url("../svg/like(1).svg");
}

.wyy-body-player-likeunm{
    margin-left: -43px;
    margin-top: 33px;
    position: absolute;
    height: 20px;
    width: 54px;
    text-align: center;
}

.wyy-body-player-collectimg{
    background-image: url("../svg/floder(1).svg");
    background-size: 100% 100%;
    float: left;
    width: 24px;
    height: 24px;
    margin-left: 37px;
    margin-top: 7px;
}

.wyy-body-player-collectimg:hover{
    background-image: url("../svg/folder.svg");
}

.wyy-body-player-collectnum{
    margin-top: 33px;
    margin-left: -39px;
    position: absolute;
    height: 20px;
    width: 54px;
    text-align: center;
}

.wyy-body-player-downloadimg{
    background-image: url("../svg/download.svg");
    background-size: 100% 100%;
    float: left;
    width: 32px;
    height: 32px;
    margin-left: 37px;
    margin-top: 11px;
}

.wyy-body-player-downloadimg:hover{
    background-image: url("../svg/download(1).svg");
}

/*歌词样式*/
.el-drawer__body{
    overflow: scroll;
}

.lyrics{
    text-align: center;
}

